<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
	        //1.用 v-for 把一个数组对应为一组元素
	        		<ul id="app">
					  <li v-for="item in items">
					    {{ item.message }}
					  </li>
					</ul>
					var vm = new Vue({
						el:'#app',
						data:{
							items:[
							    {name:'ls',age:24},
							    {name:'xx',age:25}
							]
						}
					})
	          //在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
	          		<ul id="app">
					  <li v-for="(item,index) in items">
					    {{index}}--{{ item.message }}
					  </li>
					</ul>
					var vm = new Vue({
						el:'#app',
						data:{
							items:[
							    {name:'ls',age:24},
							    {name:'xx',age:25}
							]
						}
					})
	          //你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法
	          		<ul id="app">
					  <li v-for="(item,index) of items">
					    {{index}}--{{ item.message }}
					  </li>
					</ul>
					var vm = new Vue({
						el:'#app',
						data:{
							items:[
							    {name:'ls',age:24},
							    {name:'xx',age:25}
							]
						}
					})
	              
	              
	        //2.一个对象的v-for
	            //第一个参数为值，第二个参数为键，第三个参数为索引
	            //在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
	                <ul id="app">
					  <li v-for="(value,key,index) in object">
					     {{value}}--{{key}}--{{index}}
					  </li>
					</ul>
					var vm = new Vue({
						el:'#app',
						data:{
							object:{name:'ls',age:24}
						}
					})
		    //3. key
		        //为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。
			        <div v-for="item in items" :key="item.id">
					  <!-- 内容 -->
					</div>
		    
		    //4.数组更新检测
		        //4.1 变异方法，Vue 包含一组观察数组的变异方法，会改变被这些方法调用的原始数组，所以它们也将会触发视图更新
		              push()
		              unshift()
		              pop()
		              shift()
		              sort()
		              splice()
		              reverse()
		        //4.2 替换数组，非变异方法，例如filter(),concat()和slice()不会改变原始数组，但总是返回一个新数组。我们可以用新数组替换旧数组
		        //4.3 注意事项
		            //由于JavaScript的限制,Vue不能检测以下变动的数组
		            //(1) 当你利用索引直接设置一个项时,例如：vm.items[indexOfItem] = newValue
		            //(2) 当你修改数组的长度时,例如：vm.items.length = newLength
		                var vm = new Vue({
							  data: {
							    items: ['a', 'b', 'c']
							  }
						})
						vm.items[1] = 'x' // 不是响应性的
						vm.items.length = 2 // 不是响应性的
				    //解决第一类问题使用Vue.set(vm.items, indexOfItem, newValue)或者vm.items.splice(indexOfItem, 1, newValue)
				    //解决第二类问题使用vm.items.splice(newLength)
		    //5.对象更改检测注意事项
		      //由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
				    var vm = new Vue({
					  data: {
					    a: 1
					  }
					})
					// `vm.a` 现在是响应式的
					
					vm.b = 2
					// `vm.b` 不是响应式的
		      //对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
			      	var vm = new Vue({
					  data: {
					    userProfile: {
					      name: 'Anika'
					    }
					  }
					})
			      	Vue.set(vm.userProfile , 'age', 24) 
			//6.显示过滤/排序结果
			    //显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
			       <li v-for="n in evenNumbers">{{ n }}</li>
					data: {
					  numbers: [ 1, 2, 3, 4, 5 ]
					},
					computed: {
					  evenNumbers: function () {
					    return this.numbers.filter(function (number) {
					      return number % 2 === 0
					    })
					  }
					}
			    //在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法
			    	<li v-for="n in even(numbers)">{{ n }}</li>
					data: {
					  numbers: [ 1, 2, 3, 4, 5 ]
					},
					methods: {
					  even: function (numbers) {
					    return numbers.filter(function (number) {
					      return number % 2 === 0
					    })
					  }
					}
			//7.一段取值范围的v-for
			        <ul>
            			<li v-for="(item,index) in 10" :key="item.index">{{item}}--{{index}}</li>
            		</ul>
            //8.v-for on a <template>
                //可以利用带有 v-for 的 <template> 渲染多个元素
                    <ul>
					  <template v-for="item in items">
					    <li>{{ item.msg }}</li>
					    <li class="divider" role="presentation"></li>
					  </template>
					</ul>
		    //9. v-for with v-if
		        //当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。
		        		<li v-for="todo in todos" v-if="!todo.isComplete">
						  	{{ todo }}
						</li>
		    //10.一个组件的v-for
		               <my-component v-for="item in items" :key="item.id"></my-component>
		</script>
	</body>
</html>
